<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">评价</block></cu-custom>
		<!-- <echart></echart> -->
		<view class="qiun-columns padding-sm bg-white">
			<div class="flex align-center justify-between text-333">
			    <text class="text-df text-fw600">品价比综合评分</text>
			    <text class="text-sm">评分总人数：{{totalCommentNum}}</text>
			</div>
			<view class="qiun-charts" >
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}" @touchstart="touchRing"></canvas>
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
			</view>
		</view>
		<view class="tabbar-box bg-white flex align-center margin-bottom-sm margin-top-sm padding-top-sm padding-bottom-sm">
		    <view class="comment-tabbar" v-for="(item, index) in tabbar" :key="index" @click="handleChangeTabbar(item, index)">
		        <view v-if="item.title==='有图'" :class="tabActive===index? ['tabtitle','selectedTab']:'tabtitle'">
		            {{item.title+'('+hasImageNum+')'}}
		        </view>
		        <view v-else :class="tabActive===index? ['tabtitle','selectedTab']:'tabtitle'">
		            {{item.title}}
		        </view>
		    </view>    
		</view>
		<view class="bg-white flex justify-end align-center padding-sm" style="position: relative;margin-top: 1px;top: 1px;">
			<!-- <view class="text-sm">按时间排序</view> -->
			<view class="text-sm margin-left-sm" :class="sortIndex===index?'text-333':'text-999'" v-for="(item,index) in sortList" :key="index" @tap="handleSort(index)">
				{{sortIndex===index?'':'按'}}{{item.name}}
			</view>
		</view>
		<GoodsComment :commentList="commentList"></GoodsComment>
	</view>
</template>

<script>
	import GoodsComment from '@/components/goods/GoodsComment.vue'
	import echart from '@/components/goods/echart.vue'
	import * as Goods_API from '@/api/goods.js'
	import uCharts from '@/components/u-charts/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	var _self;
	var canvaRing=null;
	export default {
		components:{
			GoodsComment,
			echart
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				goods_id: null,
				tabActive:0,
				categreyList:[],
				totalCommentNum:0,//评论总人数
				tabbar:[
				    {title:'全部'},
				    {title:'有图'},
				    {title:'好评',grade: 'good'},
				    {title:'中评',grade: 'neutral'},
				    {title:'差评',grade:'bad'}
				],
				params:{
				  page_no: 1,
				  page_size: 20,
				},
				// 加载中
				loading: false,
				// 是否全部已加载完成
				finished: false,
				timeSort: true,
				goodsComment: '',
				hasImageNum:3,
				commentList:[],
				sortList:[
					{name:'时间排序'},
					{name:'热度排序'}
				],
				sortIndex:0,
				score:{}
			};
		},
		onLoad(e) {
			console.log(e)
			if(e.goods_id){
				this.goods_id = e.goods_id
			}
			this.GET_CommentList()
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			// this.getServerData();
		},
		onShow() {
			this.getServerData();
		},
		methods:{
			getServerData(){
				
				let params = {
					goods_id : this.goods_id
				}
				Goods_API.GoodsCommentScore(params).then(res =>{
					let Ring={series:[]};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					// Ring.series=res.data.data.Ring.series;
					this.score = res
					Ring.series=[
						{color: "#5B9CEC",data: this.score.subsection.one_to_two,name: "1-2分",type: "ring"},
						{color: "#CF5BEC",data: this.score.subsection.three_to_four,name: "3-4分",type: "ring"},
						{color: "#FFA200",data: this.score.subsection.five_to_six,name: "5-6分",type: "ring"},
						{color: "#FF5C95",data: this.score.subsection.seven_to_eight,name: "7-8分",type: "ring"},
						{color: "#1BD6DA",data: this.score.subsection.nine_to_ten,name: "9-10分",type: "ring"}
					]
					_self.showRing("canvasRing",Ring);
				})
			},
			showRing(canvasId,chartData){
				canvaRing=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'ring',
					fontSize:11,
					padding:[20,5,5,5],
					legend:{
						show:true,
						position:'bottom',
						float:'center',
						itemGap:10,
						padding:5,
						lineHeight:26,
						margin:5,
						borderWidth :1,
						data: ["1-2分", "3-4分", "5-6分", "7-8分", "9-10分"]
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					subtitle: {
						name: this.score.total_score?this.score.total_score:'',
						color: '#7cb5ec',
						fontWeight:700,
						fontSize: 25*_self.pixelRatio,
					},
					title: {
						name: this.score.total_score>0?'综合评分':'期待评分',
						color: '#666666',
						fontWeight:600,
						fontSize: 15*_self.pixelRatio,
					},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 20*_self.pixelRatio,
						  labelWidth:15
						}
					},
				});
			},
			touchRing(e){
				canvaRing.touchLegend(e, {
					animation : false
				});
				canvaRing.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaRing.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				}else{
					uni.showToast({
						title:'数据格式错误'
					})
				}
			},
			/** 按热度排序 */
			handleTimeSort(){
			    this.timeSort = true
			},
			/** 按热度排序 */
			handleHotSort(){
			    this.timeSort = false
			},
			/** 获取 */
			GET_CommentList() {
				if(this.goods_id){
					Goods_API.getGoodsCommentList(this.goods_id,this.params).then(res=>{
						this.commentList = res.data
						this.totalCommentNum = res.data_total
					})	
				}
			   
			},
			handleChangeTabbar(item,index) {
			    this.tabActive = index
				let params={}
				let {page_no,page_size} = this.params
			    if(item.grade){
					params = {
						page_no,
						page_size,
						grade: item.grade
					}
			    }else{
					if(item.title==='有图'){
						params = {
							page_no,
							page_size,
							have_image: true
						}
					}else{
						params = {
							page_no,
							page_size
						}
					}
			    }
				this.params= params
			    this.params.page_no = 1
			    this.GET_CommentList(this.params)
			},
			handleSort(index){
				this.sortIndex = index
				if(index===1){
					this.params.sortOrder = 'view_count'
					// this.params.sortOrder = 'thumb_up'
				}else{
					this.params.sortOrder = 'create_time'
				}
				this.GET_CommentList(this.params)
			}		
		}
	}
</script>

<style lang="scss">
@import '@/common/qiun.css';
.comment-tabbar{
    flex:1;
    display: flex;
    align-content: center;
    justify-content: center;
    p{
        margin: 0;
        font-size: 12px;
        line-height: 20px;
    }
}
.tabtitle{
    color: #333;
    font-size: 12px;
    line-height: 18px;
    border-radius: 30px;
    border:1px solid #EEE;
    background: #F5F5F5;
    padding: 1px 10px;
}
.selectedTab{
    color: #CB1414;
    font-size: 12px;
    line-height: 18px;
    border-radius: 30px;
    border:1px solid red;
    background: rgba(255, 0, 0, 0.493);
    padding: 1px 10px;
}
 .comment-box {
    background: #fff;
    // min-height: 400px;
    padding:10px 15px;
    .comment-sort{
        display: flex;
        justify-content: flex-end;
        .selectedSort{
          color: #666;
          font-size: 12px;
          padding: 2px 0 2px 5px;
        }
        .sort{
          color: #999;
          font-size: 12px;
          padding: 2px 0 2px 5px;
        }
    }
    .comment-item {
      background: #fff;
      padding: 20px 0;
      .header{
        display: flex;
        align-items: center;
        p{margin: 0;}
        .avatar{
            width: 40px;
            height: 40px;
            border-radius: 100%;
            overflow: hidden;
            margin-right: 10px;
        }
        .userInfo{
          display: flex;
          align-items: center;
          .username{
            color: #333;
            font-size: 14px;
            font-weight: 400;
          }
          .level-icon{
              width: 18px;
              height: 18px;
          }
        }
        .createTime{
            color: #999;
            font-size: 11px;
        }
      }
      .content{
        padding: 10px 0 5px;
        .text{
            color: #333;
            font-size: 14px;
            font-weight: 400;
            line-height: 23px;
            margin: 0;
        }
        .images{
            display: flex;
            flex-wrap: wrap;
            .commentImg{
                width: 21%;
                display: flex;
                justify-content: center;
                overflow-x: hidden;
                margin-bottom: 5px;
                padding: 5px;
                img{
                    width: 70px;
                    height: 70px;
                    border-radius: 10px;
                    overflow: hidden;
                }
            }
        }
      }
    }
    .comment-other {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .comment-watch {
        color: #999;
        font-size: 14px;
        font-weight: 400;
      }
      .comment-icons{
        display: flex;
        align-items: flex-end;
      .icon{
        display: flex;
        align-items: center;
        p{
          margin: 0;
          color: #333;
        }
        img{
            width: 20px;
            height: 20px;
            margin-right: 4px;
        }
        padding-bottom: 2px;
      }
      .icon-collect{
        margin-left: 15px;
      }
    }
    }
  }
  .comment-sort{
          display: flex;
          justify-content: flex-end;
          .selectedSort{
            color: #666;
            font-size: 12px;
            padding: 2px 0 2px 5px;
          }
          .sort{
            color: #999;
            font-size: 12px;
            padding: 2px 0 2px 5px;
          }
    }
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
